<template>
	<view class="jiben">
		<!-- 标题 -->
		<view class="nav">
			<view>基本信息</view>
			<image src="/static/index/tui.png" mode="" @click="toBack"></image>
		</view>
		<!-- 表单 -->
		<view class="ipt">
			<view class="ipt-item" @click="gaiTou">
				<view class="item-title">
					头像
				</view>
				<view class="item-body">
					<image :src="image" mode=""></image>
					<text>&gt;</text>
				</view>
			</view>
			<view class="ipt-item" @click="sex">
				<view class="item-title">
					性别
				</view>
				<view class="item-body">
					<text>{{gender}}</text>
					<text>&gt;</text>
				</view>
			</view>
			<view class="ipt-item" @click="show">
				<view class="item-title">
					昵称
				</view>
				<view class="item-body">
					<text>{{niName}}</text>
					<text>&gt;</text>
				</view>
			</view>
			<view class="ipt-item">
				<view class="item-title">
					账号ID
				</view>
				<view class="items">
					<text>123688</text>
					<text>&gt;</text>
				</view>
			</view>
		</view>
		
		
		<!-- 拟态框 -->
		<view class="model" v-show="isShow">
			<!-- 退出按钮 -->
			<view class="model-title">
				<image src="/static/index/004.png" mode="" @click="show"></image>
			</view>
			<view class="model-content">
				<view class="model-content-box">
					<view class="model-content-title center">
						修改昵称
					</view>
					<view class="model-content-input center">
						<view><input type="text" v-model="niValue" placeholder="请输入您的昵称（16个字符以内）" maxlength="16" @input="maxLength"/></view>
					</view>
					<view class="text-red"><view v-show="isText">字数超出限制</view></view>
					<view class="model-content-end">
						<view>提示：请输入文明合法的昵称文字，修改后审核时间为1-3个工作日〜</view>
						<view class="red">*您当前剩余{{gaiIndex}}次修改昵称机会</view>
					</view>
				</view>
				<view class="model-content-btn">
					<button type="default" @click="show">取消</button>
					<button type="warn" @click="gaiName">确定</button>
				</view>
			</view>
			<view class="model-end">
				<view>《用户协议》《隐私协议》</view>
			</view>
		</view>
		<!-- 弹出层 -->
		<u-popup class="u-popup" v-model="showTan" mode="center" width="50%" height="10%" @click="sex">
			<text class="u-popup-boy" @click="gaiSex(1)">男生</text>
			<text class="u-popup-gril" @click="gaiSex(0)">女生</text>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				niName:"读书123688", //默认昵称
				niValue:'',  //小说昵称
				isShow:false, //模态框的显示隐藏
				image:"/static/static/role/role_14.png",  //头像
				isText:false, //输入框字符限制警告
				gaiIndex:1,  // 修改机会
				showTan:false,  //控制弹出层
				gender:"女生",  //性别
			}
		},
		// onLoad(option){
		// 	//页面加载接收其他页面传来的值
		// 	// console.log(option)
		// 	//接收修改头像页传过来的值
		// 	if(JSON.stringify(option) == "{}") return
		// 	this.image = option.img
		// },
		onShow(){
			try { //获取头像信息
			    const value = uni.getStorageSync('touImage');
			    if (value) {
			        //console.log(value);
					this.image = value
			    }
			} catch (e) {
			    // error
			}
			try {  //获取昵称
			    const value = uni.getStorageSync('gaiName');
			    if (value) {
			        //console.log(value);
					this.niName = value
			    }
			} catch (e) {
			    // error
			}
			try {  //获取性别
			    const value = uni.getStorageSync('sex');
			    if (value) {
			        //console.log(value);
					this.gender = value
			    }
			} catch (e) {
			    // error
			}
		},
		methods: {
			toBack(){ // 返回上一级
			// console.log(1111)
				uni.switchTab({
					url:'/pages/my/my',
				})
			},
			gaiTou(){ //跳转到改头像页面
				//console.log(111)
				uni.navigateTo({
					url:'../gaitou/gaitou'
				})
			},
			show(){ //控制模态框的显示隐藏,取消按钮
				// console.log(111)
				this.isShow =! this.isShow 
				
			},
			maxLength(){ //判断输入框的值长度是否超出限制，
				// console.log(this.niValue.length)
				if(this.niValue.length >= 16){
					//超出则给予警告
					this.isText = true
				}else{
					this.isText = false
				}
			},
			gaiName(){  //点击确定按钮修改昵称
				//判断输入字符的长度，如果长度为0，不执行确定按钮
				if(this.niValue.length == 0) return this.isShow =! this.isShow 
				//根据修改次数的值来判断是否执行改昵称，次数为0不执行一下函数
				if(this.gaiIndex>0){
					//改昵称
					this.niName = this.niValue
					//隐藏模态框
					this.isShow =! this.isShow 
					//清空输入框的值
					this.niValue = ''
					//修改次数 - 1
					this.gaiIndex -= 1
					 //先清理本地缓存,防止数据重复渲染
					 // uni.removeStorage({
					 //     key: 'gaiName',
					 //     success: function (res) {
					 //         console.log('success');
					 //     }
					 // });
					//昵称修改成功，则把值传给本地缓存
					// uni.$emit("gaiNiName",this.niName)
					try {
					    uni.setStorageSync('gaiName',this.niName);
					} catch (e) {
					    // error
					}
					//修改昵称成功
					uni.showToast({
					    title: '昵称修改成功！',
					    duration: 2000
					});
				}else{
					//修改机会为 0 时，执行改函数
					uni.showToast({
					    title: '修改机会已经用完！',
					    duration: 2000,
						icon:"none"
					});
				}
			},
			sex(){  //修改性别显示隐藏
				this.showTan =! this.showTan
			},
			gaiSex(index){  //修改性别
				//console.log(index)
				//根据传过来的值来判断男生女生
				if(index == 1){this.gender = "男生"}
				if(index == 0){this.gender = "女生"}
				this.showTan =! this.showTan
				//将性别信息存储到本地
				try {
				    uni.setStorageSync('sex',this.gender);
				} catch (e) {
				    // error
				}
			}
		}
	}
</script>

<style scoped lang="scss">
.jiben{
	position: relative;
	margin: 0;
	padding: 0;
	width: 750rpx;
	height: 100vh;
	.nav{
		// margin-top: 20rpx;
		padding: 87rpx 54rpx 0 35rpx;
		display: flex;
		justify-content: space-between;
		image{
			width: 48rpx;
			height: 48rpx;
		}
		view{
			font-size: 46rpx;
			font-family: Microsoft YaHei;
			font-weight: bold;
			color: #000000;
		}
		}
	.ipt{
		padding: 35rpx 54rpx 0 35rpx;
		margin-top: 45rpx;
		.btn{
			margin-top: 55rpx;
		}
		.ipt-item{
			display: flex;
			justify-content: space-between;
			// background-color: #18B566;
			width: 690rpx;
			height: 126rpx;
			line-height: 100rpx;
			border-bottom: 1px solid #F4F4F4;
			.item-title{
				font-size: 30rpx;
				font-family: Microsoft YaHei;
				font-weight: 400;
				color: #000000;
			}
			.item-body{
				font-size: 28rpx;
				font-family: Microsoft YaHei;
				font-weight: 400;
				color: #B2B2B2;
				image{
					width: 48rpx;
					height: 48rpx;
					margin-right: 28rpx;
					border-radius: 50%;
				}
			}
			.items{
				font-size: 22rpx;
				font-family: Microsoft YaHei;
				font-weight: 400;
				color: #B2B2B2;
			}
		}
	}
	.model{
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		width: 750rpx;
		height: 100%;
		background: rgba(0, 0, 0, 0.73);
		font-family: Microsoft YaHei;
		.model-title{
			display: flex;
			justify-content: flex-end;
			padding: 87rpx 54rpx 0 35rpx;
			image{
				width: 48rpx;
				height: 48rpx;
			}
		}
		.model-content{
			width: 702rpx;
			height: 570rpx;
			background: #FFFFFF;
			border-radius: 20rpx;
			margin: 240rpx auto 0;
			.model-content-box{
				padding: 57rpx 37rpx 0;
				.text-red{
					color: red;
					font-size: 20rpx;
					height: 30rpx;
				}
				.center{
					display: flex;
					justify-content: center;
					align-items: center;
					flex-wrap: wrap;
				}
				.model-content-title{
					font-size: 42rpx;
					font-weight: 400;
					color: #000000;
				}
				.model-content-input{
					width: 624rpx;
					height: 82rpx;
					background: #E0E0E0;
					border-radius: 10rpx;
					font-size: 22rpx;
					font-weight: 400;
					color: #919191;
					margin-top: 55rpx;
				}
				.model-content-end{
					font-size: 28rpx;
					font-weight: 400;
					color: #B0B0B0;
					margin-top: 56rpx;
					.red{
						color:#E60606 ;
						margin-top: 23rpx;
					}
				}
			}
			.model-content-btn{
				display: flex;
				margin-top: 40rpx;
				button{
					width: 50%;
				}
			}
		}
		.model-end{
			position: absolute;
			bottom: 37rpx;
			left: 50%;
			transform: translateX(-50%);
			view{
				font-size: 28rpx;
				font-family: Microsoft YaHei;
				font-weight: 400;
				color: #bc5c42;
			}
		}
	}
	.u-popup{
		text-align: center;
		line-height: 120rpx;
		text{
			width: 70rpx; 
			height: 50rpx;
			padding: 15rpx;
			margin: 0 15rpx;
			
		}
		.u-popup-boy{
			background-color: blue;
			border-radius: 20rpx;
			color: #fff;
		}
		.u-popup-gril{
			background-color: red;
			border-radius: 20rpx;
			color: #fff;
		}
	}
}
</style>
